<template>
  <div class="time_picker">
    <div class="q-time__header flex flex-center no-wrap" style="height: 86px;line-height: 86px;position: relative">
      <div class="q-time__header-label row items-center no-wrap" dir="ltr" style="font-size: 34px">
        {{title===''||title===null?'--:--':title}}
      </div>
      <q-btn icon="access_time" class="cursor-pointer" @click="setTimeNow" :title="$t('设置为当前时间')"
        style="position: absolute;right: 16px;top: 40px" size="10px" dense/>
    </div>
    <div class="row col-12">
      <div class="col-6 row" style="border-right: 1px solid rgba(0,0,0,0.15);height: 290px">
        <div class="hourPicker row">
          <div v-for="item in hourList" :key="item" class="col-3 hourPickerDiv">
            <q-btn @click="hourChange(item)" :class="item===$d.hour?'time_btn_choose':''"
              :disable="_.indexOf(props.hourOptions, item)===-1">{{item}}</q-btn>
          </div>
        </div>
      </div>
      <div class="col-6 full-height">
        <div class="minutePicker row">
          <div v-for="o in minuteOptions" :key="o" class="col-3 minutePickerDiv">
            <q-btn @click="minuteChange(o)" :class="o===$d.minute?'time_btn_choose':''">{{o}}</q-btn>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'TimePicker'
}
</script>
<script lang="ts" setup>

import {computed, reactive, watch} from 'vue'
import dayjs from 'dayjs'
import _ from 'lodash'

interface PropsDef {
  // 显示时间
  title: string | null
  // 可选择的小时
  hourOptions?: string[]
  // 可选择的分钟
  minuteOptions?: string[]
  // 颜色
  color?: string
  // 文本颜色
  textColor?: string
  modelValue: any
}

const hourList = computed(() => {
  return ['00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23']
})

const props = withDefaults(defineProps<PropsDef>(), {
  hourOptions: () => ['00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23'],
  minuteOptions: () => ['00','05','10','15','20','25','30','35','40','45','50','55'],
  color: '--',
  textColor: '--',
  title: '--:--'
})

const emit = defineEmits<{
  (e: 'update:modelValue', data: any): void
}>()

const $d = reactive({
  hour: '',
  minute: ''
})

// 真值
const realValue = computed({
  get() {
    return props.modelValue
  },
  set(val: any) {
    emit('update:modelValue', val)
  },
})

const hourChange = function (e: string) {
  $d.hour = e
  if ($d.minute===''||$d.minute==='--') {
    $d.minute = '00'
  }
  realValue.value = `${$d.hour}:${$d.minute}`
}
const minuteChange = function (e: string) {
  $d.minute = e
  if ($d.hour===''||$d.hour==='--') {
    $d.hour = '00'
  }
  realValue.value = `${$d.hour}:${$d.minute}`
}

const setTimeNow = function () {
  if (_.indexOf(props.hourOptions, dayjs().format('HH'))!==-1) {
    const nowMinute = dayjs().format('mm')
    $d.hour = dayjs().format('HH')
    let minute = ''
    const maxIdx = props.minuteOptions.length-1
    if (_.indexOf(props.minuteOptions, Number(nowMinute)<10?`0${Number(nowMinute)}`:nowMinute.toString())!==-1) {
      minute = nowMinute.toString()
    } else if (Number(nowMinute)>Number(props.minuteOptions[maxIdx-1])) {
      if (Number(nowMinute)<(Number(props.minuteOptions[maxIdx])+60)/2){
        minute = props.minuteOptions[maxIdx]
      } else {
        minute = '00'
        $d.hour = $d.hour==='23'?'00':(Number($d.hour)+1).toString()
        $d.hour = Number($d.hour)<10?`0${Number($d.hour)}`:$d.hour
      }
    }
    else{
      _.forEach(props.minuteOptions, (o, idx) => {
        if (Number(nowMinute) > Number(o) && Number(nowMinute)<Number(props.minuteOptions[idx+1])) {
          minute =  Number(nowMinute)>(Number(o)+Number(props.minuteOptions[idx+1]))/2?props.minuteOptions[idx+1]:o
        }
      })
    }
    $d.minute = minute
    realValue.value = `${$d.hour}:${$d.minute}`
  }

}

const timeArr = _.split(props.modelValue, ':')
if (timeArr.length === 2) {
  $d.hour = timeArr[0]===''?'--':timeArr[0]
  $d.minute = timeArr[1]===''?'--':timeArr[1]
}

watch( () => props.modelValue,
  () => {
    const timeArr = _.split(props.modelValue, ':')
    if (timeArr.length === 2) {
      $d.hour = timeArr[0]===''?'--':timeArr[0]
      $d.minute = timeArr[1]===''?'--':timeArr[1]
    } else {
      $d.hour = '--'
      $d.minute = '--'
    }
  })
</script>

<style scoped lang="sass">
.time_picker
  min-width: 290px
  max-width: 290px
  height: 376px
  border-radius: 4px
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12)
.hourPicker, .minutePicker
  height: 240px
  margin-top: 10px
  text-align: center
.hourPickerDiv
  height: 40px
  line-height: 40px
  display: inline-block
  .q-btn
    height: 30px
    width: 30px
    border-radius: 50%
.minutePickerDiv
  height: 80px
  line-height: 80px
  display: inline-block
  .q-btn
    height: 30px
    width: 30px
    border-radius: 50%
.time_btn_choose
  background-color: $primary
  color: #fff
</style>
